<!doctype html>
<html>
<head>
    <title>Calendar Example</title>
    <script type="text/javascript" src="../../../../build/yui/yui.js"></script>
<style>
.yui3-skin-sam .redtext {
	color:#ff0000;
}
</style>
</head>
<body class="yui3-skin-sam">
<input type="submit" value="Hide calendar" id="hideButton"></input>
<input type="submit" value="Show calendar" id="showButton"></input>
<div id="mycalendar"></div>
<div id="currentDate"></div>
<div id="secondcalendar"></div>

<script>
YUI({
base: '../../../../build/',
    filter: "raw"
}).use('calendar',  function(Y) {


Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.TWO_PANE_TEMPLATE;

function myHeaderRenderer (curDate) {
	     	var ydate = Y.DataType.Date,
	     	    output = ydate.format(curDate, {format: "%B %Y"}) +
	     	             " &mdash; " +
	     	             ydate.format(ydate.addMonths(curDate, 1), {format: "%B %Y"});
	     	return output;
	     };


var dYear = "2011";
var dMonth = "10";
var dDate = "10";


var newrules = {};

function addNewRule(ruleSet, path, ruleName) {

var currentObject = ruleSet;

for (var i = 0, len = path.length - 1; i <= len; i++) {
   if (i == len) {
    currentObject[path[i]] = ruleName;
   }
   else {
    currentObject[path[i]] = {};
    currentObject = currentObject[path[i]];
   }
}

return ruleSet;

};

newrules = addNewRule(newrules, [dYear, dMonth, dDate], "theweekends");


//console.log(newrules);


	     var myRules1 = {
	     	"2011": {
                "0-11": {
                	"all": {
                		"1,2": "theweekends"
                	}
                },
	     		"all": {
	     			"5": "thefifths"
	     		}
	     	}

	     };


function myFilter (oDate, oNode, rules) {
if (Y.Array.indexOf(rules, "theweekends") >= 0) {
	//oNode.addClass('redtext');
}
};

         var calendar = new Y.Calendar({
	        showNextMonth: true,
	        showPrevMonth: false,
	        selectionMode: "multiple",
	        minimumDate: new Date(2011,0,1),
	        maximumDate: new Date(2011,11,1),
	        date: new Date(2011,10,1),
	        headerRenderer: myHeaderRenderer,
			width:'600px'});


		calendar.selectDates([new Date(2011,9,4), new Date(2011,9,3), new Date(2011,10,8)]);
		calendar.render("#mycalendar");

    calendar.set("tabIndex", 1);

		calendar.set("customRenderer", {rules: myRules1, filterFunction: myFilter});

		calendar.set("enabledDatesRule", null);
    	calendar.set("disabledDatesRule", "thefifths");

/*
		calendar.on("dateChange", function (ev) {console.log("New date value: " + ev.newVal); console.log("What about..." + calendar.get("date"));});
*/



		calendar.selectDates([new Date(2011,9,5), new Date(2011,8,23), new Date(2011,11,21)]);

		//console.log(calendar.get("selectedDates"));

Y.CalendarBase.CONTENT_TEMPLATE = Y.CalendarBase.ONE_PANE_TEMPLATE;

                var myRules2 = {
                   "2011": "fullyear",
                   "2010-2011": {
                       "9-11": {
                           "all": {
                               "0,6": "theweekends"
                           },
                           "10-15": "tenthtofifteenth"
                       },
                       "11": "december",
                       "10-11": {
                           "5": "thefifths"
                       }
                   }
                };


               function myFilter (oDate, oNode, rules) {
               if (Y.Array.indexOf(rules, "theweekends") >= 0) {
                   oNode.addClass('redtext');
               }
               };

           var cfg = {
                    contentBox: "#secondcalendar",
                    date: new Date(2011,11,5),
                    customRenderer: {rules: myRules2, filterFunction: myFilter}
                };


                var firstcalendar = new Y.Calendar(cfg);

                firstcalendar.selectDates([new Date(2011,9,10), new Date(2011,11,13)]);
                firstcalendar.deselectDates([new Date(2011,9,10)]);

                firstcalendar.render();

          //      firstcalendar.set("customRenderer", {rules: myRules, filterFunction: myFilter});

});
</script>
</body>
</html>
